import React, { Component } from "react";
import Header from "./components/Header";
import Footer from "./components/Footer";

class App extends Component {
  // 生命周期

  // react构造器
  constructor(props) {
    super(props);

    // 初始化state
    this.state = {
      name: "张三",
    };
  }

  // 保存非当前页面的属性或者状态
  props = {};

  // 数据挂载前
  componentWillMount() {
    console.log(2, this);
  }

  changeName = () => {
    this.setState(
      {
        name: "李四",
      },
      () => {
        // 当前我数据更改完成之后 触发
        console.log(this.state.name, "更改完成");
      }
    );

    console.log(this.state.name);
  };

  // 渲染时：通过diff算法 生成虚拟dom树，
  render() {
    console.log(3);
    return (
      <div className="public">
        <Header />
        <div className="body">
          {this.state.name}
          <button onClick={this.changeName}>更改</button>
        </div>
        <Footer name={this.state.name} />
      </div>
    );
  }

  // 数据挂载后，一般用于初始化数据的请求
  componentDidMount() {
    console.log(4);
  }

  // -------------------------更新阶段----------------------
  //  当props发生变化时 一定回触发componentWillReceiveProps
  componentWillReceiveProps(newProps) {
    console.log(newProps, "最新的props");
  }

  // 用来做优化, 返回一个boolean值, 如果返回true 继续执行生命周期  如何返回false 停止执行生命周期
  shouldComponentUpdate(newProps, newState) {
    console.log(newProps, newState, "shouldComponentUpdate");
    console.log(this.state);

    return true;
  }

  // 更改前: 再组件确认修改信息后的最后一次执行,这个生命周期接受两个参数,最新的props和最新的state,但是再生命周期中打印this.state和this.props任然是旧值
  componentWillUpdate(newProps, newState) {
    console.log(newProps, newState, "componentWillUpdate");
  }

  // render: 通过diff算法, 生成一颗虚拟dom树,通过和旧树的比较,找到最小的差异,进行局部更新

  // 更新后: 可以接收两个参数,旧的props和旧的state, 再生命周期中打印state和props是最新的值
  componentDidUpdate(oldProps, oldState) {
    console.log(oldProps, oldState, "componentDidUpdate");
  }

  // ------------------------销毁阶段--------------------
  componentWillUnmount() {
    // 清除定时器,延时器,事件监听器,删除组件实例,卸载方法
  }
}

export default App;
